<template>
   <div class="search_container">
      <!-- 顶部搜索栏 开始-->
      <!-- Tips: 在 van-search 外层增加 form 标签，
      且 action 不为空，即可在 iOS 输入法中显示搜索按钮。 -->
      <!-- @cancel="onCancel"  手机按搜索，电脑按回车 -->
      <!-- onCancel 取消触发 -->
      <form action="/" class="search_form">
         <van-search
            v-model="searchText"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            @cancel="onCancel"
            background="#3296fa"
            @focus="isResultShow = false"
         />
         <!--  @focus 搜索完文本框获得焦点时 搜索结果不显示 那么展示联想建议-->
      </form>
      <!-- 顶部搜索栏 结束-->

      <!-- 1.先找默认情况，把它放在最后～ 
      使用v-else来控制默认情况 

      2.找到那个确定的条件（当我们触发搜索时才展示），放在第一位 

      3.中间的，写v-else-if，找到对应的条件即可  -->

      <!-- 搜索结果 -->
      <!-- 敲击回车搜索显示 -->
      <SearchResult
         v-if="isResultShow"
         :search-text="searchText"
      ></SearchResult>

      <!-- 联想建议-->
      <!-- 如果输入框里有内容并且没有敲击回车 显示 -->
      <!-- @search="onSearch"  触发 搜索事件 -->
      <SearchSuggestion
         v-else-if="searchText"
         :search-text="searchText"
         @search="onSearch"
      ></SearchSuggestion>

      <!-- 搜索历史记录 -->
      <!-- 默认，打开页面 -->
      <SearchHistory
         v-else
         :search-histories="searchHistories"
         @clear_search_histories="searchHistories = []"
         @search="onSearch"
      ></SearchHistory>
      <!-- @search="onSearch"  不用传参 默认调用 -->
   </div>
</template>

<script>
import SearchHistory from './components/search_history.vue'
import SearchSuggestion from './components/search_suggestion.vue'
import SearchResult from './components/search_result.vue'
import { setItem, getItem } from '@/utils/storige'
export default {
   name: 'Search_container',
   data() {
      return {
         searchText: '',
         // 控制搜索结果的展示
         isResultShow: false,
         // 搜索的历史记录数据
         // 拿来的数据有效直接用，无效直接返回空数组
         searchHistories:
            getItem('TOUTIAO_SEARCH_HISTORIES') || []
      }
   },
   // 只要数组的内容发生变化都会监听到
   watch: {
      searchHistories(value) {
         setItem('TOUTIAO_SEARCH_HISTORIES', value)
      }
   },
   methods: {
      onSearch(val) {
         // console.log(val)
         // 敲击回车 搜索结果开启
         this.searchText = val

         // 存储搜索历史记录
         // 要求：不要有重复历史记录，最新的数据排在最前面
         const index = this.searchHistories.indexOf(val)
         // 不等于 -1 已经存在，移除
         if (index !== -1) {
            this.searchHistories.splice(index, 1)
         }
         this.searchHistories.unshift(val)

         // 显示搜索结果
         this.isResultShow = true
      },
      onCancel() {
         // 点击取消，从哪来回哪去
         this.$router.back()
      }
   },
   components: {
      SearchHistory,
      SearchSuggestion,
      SearchResult
   }
}
</script>

<style lang="less" scoped>
.search_container {
   padding-top: 108px;
   .van-search__action {
      color: #fff;
   }
   .search_form {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1;
   }
}
</style>
